<template>
    <div class="main_box" style="padding-right:10px">
        <div class="add_wrap">
            <div class="tit">
                <h2>{{ dataForm.receiverId ? '编辑接收器' : '新增接收器' }}</h2>
                <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
            </div>
            <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
                <el-row>
                    <el-form-item label="接收器名称" prop="equipName">
                        <el-input v-model="dataForm.equipName" @keydown.native="keydown($event)"></el-input>
                    </el-form-item>
                    <el-form-item label="MAC地址" prop="equipMac">
                        <el-input v-model="dataForm.equipMac"></el-input>
                    </el-form-item>
                    <el-form-item label="商户" prop="businessId">
                        <el-select v-model="dataForm.businessId" clearable filterable>
                            <el-option v-for="item in businessList" :key="item.id" :value="item.id" :label="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="部门" prop="departIds">
                        <el-cascader @focus="getDepartList()" v-model="dataForm.departIds" :options="departList" :props="{
                            label: 'departName',
                            value: 'departId',
                            checkStrictly: true
                        }" clearable filterable>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="dataForm.remark"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item>
                        <el-button plain type="primary" @click="sureClick">保 存</el-button>
                        <el-button plain @click="returnList">取 消</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import * as message from "@/constants/message";
import ReceiverApi from '@/api/equip/receiver';
import BusinessApi from "@/api/business/business"
import DepartApi from "@/api/business/depart";


export default {
    name: "ReceiverAdd",
    data() {
        return {
            dataForm: {
                receiverId: "",
                equipName: "",
                equipMac: "",
                businessId: "",
                remark: "",
                departIds: '',
            },
            businessList: [],
            departList: [],
            roleRules: {
                equipName: [
                    { required: true, message: "请输入接收器名称", trigger: "blur" },
                ],
                equipMac: [
                    { required: true, message: "请输入MAC地址", trigger: "blur" },
                ],
                businessId: [
                    { required: true, message: "请选择商户", trigger: "change" }
                ],
                departIds: [
                    { required: true, message: "请选择部门", trigger: "change" }
                ],
            },
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        async getDepartList() {
            const params = {};
            params.businessId = this.dataForm.businessId;
            const res = await DepartApi.listMangerTree(params);
            this.departList = res.data;
        },
        init() {
            this.listBusiness()
            if (this.$route.query.id) {
                this.dataForm.receiverId = this.$route.query.id
                this.getData();

            }
        },
        keydown(e) {
            if (e.keyCode == 32) {
                e.returnValue = false;
            }
        },
        getData() {
            var cond = {
                id: this.dataForm.receiverId
            }
            ReceiverApi.getReceiverInfo(cond)
                .then(res => {
                    this.$Utils.bindingBean(this.dataForm, res.data)
                    this.getDepartList()
                    const { departId, firstDepartId, secondDepartId, thirdDepartId } = res.data;
                    // 创建一个包含所有可能值的数组，并过滤掉 null 和 undefined
                    const departIds = [departId, firstDepartId, secondDepartId, thirdDepartId].filter(value => value != null);

                    // 赋值给 this.dataForm.departIds
                    this.dataForm.departIds = departIds;
                })
        },
        listBusiness() {
            BusinessApi.listIdName().then(res => {
                this.businessList = res.data
            })
        },
        sureClick() {

            // 提交
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
                        .then(() => {
                            if (this.dataForm.receiverId) {
                                this.editData();
                            } else {
                                this.addData();
                            }
                        });
                }
            })
        },
        editData() {
            // 编辑
            var cond = {
                receiverId: this.dataForm.receiverId,
                equipName: this.dataForm.equipName,
                equipMac: this.dataForm.equipMac,
                businessId: this.dataForm.businessId,
                remark: this.dataForm.remark,
                departId: this.dataForm.departIds[0],
                firstDepartId: this.dataForm.departIds[1],
                secondDepartId: this.dataForm.departIds[2],
                thirdDepartId: this.dataForm.departIds[3]
            }

            if (this.$route.query.hasOwnProperty("equipState")) {
                // 是从设备开放池来的就添加设备状态参数
                cond.equipState = this.$route.query.equipState
            }
            ReceiverApi.editReceiver(cond)
                .then(data => {
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        addData() {
            // 新增
            var cond = {
                equipName: this.dataForm.equipName,
                equipMac: this.dataForm.equipMac,
                businessId: this.dataForm.businessId,
                remark: this.dataForm.remark,
                departId: this.dataForm.departIds[0],
                firstDepartId: this.dataForm.departIds[1],
                secondDepartId: this.dataForm.departIds[2],
                thirdDepartId: this.dataForm.departIds[3]
            }
            ReceiverApi.addReceiver(cond)
                .then(data => {
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        returnList() {
            this.$store.dispatch('delView', this.$route);
            if (this.$route.query.hasOwnProperty("equipState")) {
                // 如果是从设备开放池来的就返回到那里去
                this.$router.push({ path: '/equip/equipOpenPoolManagement' })
            } else {
                this.$router.push({ path: '/equip/receiverManagement' })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style  lang="scss"></style>
